{% extends "management/base.html" %}
{% block title %}查看{% endblock %}

{% block content %}

    <div class="container">
        <div class="row">
            <div class="col-md-12 col-md-offset-1">
                <div class="col-md-6 ">
                    <div id="container" style="min-width:400px;height:0px"></div>
                        <div id="charts">
                            <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.2/bootstrap-table.min.js"></script>
                            <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.2/locale/bootstrap-table-zh-CN.min.js"></script>
                            <script src="/static/js/highstock.js"></script>
                            <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

                        <script>
                            $.getScript(`http://fund.eastmoney.com/pingzhongdata/{{ fund.fund_code }}.js`, function (js) {
                                $("#charts").highcharts('StockChart', {
                                    tooltip: {
                                        xDateFormat: "%Y-%m-%d",
                                        pointFormat: "<p>单位净值：{point.y:.3f}元</p>",
                                        crosshairs: true
                                    },
                                    legend: {
                                        enabled: false
                                    },
                                    navigator: {
                                        enabled: false
                                    },
                                    scrollbar: {
                                        enabled: false
                                    },
                                    rangeSelector: {
                                        inputEnabled: false,
                                        buttons: [{
                                            type: "month",
                                            count: 1,
                                            text: "近1月"
                                        }, {
                                            type: "month",
                                            count: 3,
                                            text: "近3月"
                                        }, {
                                            type: "month",
                                            count: 6,
                                            text: "近6月"
                                        }, {
                                            type: "year",
                                            count: 1,
                                            text: "近1年"
                                        }, {
                                            type: "year",
                                            count: 3,
                                            text: "近3年"
                                        }, {
                                            type: "year",
                                            count: 5,
                                            text: "近5年"
                                        }, {
                                            type: "all",
                                            text: "成立来"
                                        }],
                                        selected: 6
                                    },
                                    yAxis: {
                                        title: {
                                            text: "{{ fund.fund_name }}"
                                        },
                                        labels: {
                                            formatter: function () {
                                                return this.value.toFixed(3)
                                            }
                                            },
                                        tickPixelInterval: 100
                                    },
                                    title: {
                                        text: ""
                                    },
                                    xAxis: {
                                        maxPadding: .05,
                                        type: "datetime",
                                        dateTimeLabelFormats: {
                                            day: "%m-%d",
                                            week: "%m-%d",
                                            month: "%Y-%m",
                                            year: "%Y"
                                        }
                                        },
                                    plotOptions: {
                                        area: {
                                            fillColor: {
                                                linearGradient: {
                                                    x1: 0,
                                                    y1: 0,
                                                    x2: 0,
                                                    y2: 1
                                                },
                                                stops: [[0, Highcharts.getOptions().colors[0]],
                                                       [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get("rgba")]]
                                            },
                                            marker: {
                                                radius: 2
                                            },
                                            lineWidth: 1,
                                            states: {
                                                hover: {
                                                    lineWidth: 2
                                                }
                                                },
                                            threshold: null
                                        }
                                        },
                                    series: [{
                                        type: "area",
                                        data: Data_netWorthTrend,
                                        turboThreshold: Number.MAX_VALUE
                                    }]
                                });
                            });
                        </script>
                    </div>

                </div>

                <div class="col-md-5 col-md-offset-1">
                    <h2 class="text-center">{{ fund.fund_name }}</h2>
                    <h3>基金代码：{{ fund.fund_code }}</h3>
                    <h3>更新时间：{{ fund.update_time }}</h3>
                    <h3>单位净值：{{ fund.net_unit_value }}</h3>
                    <h3>日增长率：{{ fund.day_growth }}%</h3>
                    <h3>近一周：{{ fund.week }}%</h3>
                    <br>
                    <a href="#demo" class="btn btn-primary" data-toggle="collapse">基金详情</a>
                    <div id="demo" class="collapse">
                        <div class="container-fluid">

                            <div class="row">
                                <div class="col-sm-4" style="background-color:lavender;">累计净值：{{ fund.cumulative_net_value }}</div>
                                <div class="col-sm-4" style="background-color:lavenderblush;">手续费：{{ fund.buy_fee_rate }}</div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4" style="background-color:lavender;">近一月：{{ fund.month }}%</div>
                                <div class="col-sm-4" style="background-color:lavenderblush;">近三个月：{{ fund.three_months }}%</div>
                                <div class="col-sm-4" style="background-color:lavender;">半年来：{{ fund.six_months }}%</div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4" style="background-color:lavender;">近一年：{{ fund.year }}%</div>
                                <div class="col-sm-4" style="background-color:lavenderblush;">近俩年：{{ fund.two_years }}%</div>
                                <div class="col-sm-4" style="background-color:lavender;">近三年：{{ fund.three_years }}%</div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4" style="background-color:lavender;">今年来：{{ fund.this_year }}%</div>
                                <div class="col-sm-4" style="background-color:lavenderblush;">成立来：{{ fund.establish }}%</div>
                            </div>
                        </div>

                    </div>
{#                    <h4> {{ stock.one }}</h4>#}

{#                    <div id="accordion"#}
{##}
{#                    >#}
{##}
{#                        <div class="card">#}
{#                          <div class="card-header">#}
{#                            <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">#}
{#                            选项二#}
{#                          </a>#}
{#                          </div>#}
{#                          <div id="collapseTwo" class="collapse" data-parent="#accordion">#}
{#                            <div class="card-body">#}
{#                              #2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！#}
{#                            </div>#}
{#                          </div>#}
{#                        </div>#}
{#                        <div class="card">#}
{#                          <div class="card-header">#}
{#                            <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">#}
{#                              持有股票#}
{#                            </a>#}
{#                          </div>#}
{#                          <div id="collapseThree" class="collapse" data-parent="#accordion">#}
{#                            <div class="card-body">#}
{##}
{#                              <div class="row">#}
{#                                <div class="col-sm-2" >{{ stock.one }}</div>#}
{#                                <div class="col-sm-2" >{{ stock.two }}</div>#}
{#                                <div class="col-sm-2" >{{ stock.three }}</div>#}
{#                                <div class="col-sm-2" >{{ stock.four }}</div>#}
{#                                <div class="col-sm-2" >{{ stock.five }}</div>#}
{#                              </div>#}
{##}
{#                              <div class="row">#}
{#                                <div class="col-sm-2" >{{ stock.six }}</div>#}
{#                                <div class="col-sm-2" >{{ stock.seven }}</div>#}
{#                                <div class="col-sm-2" >{{ stock.eight }}</div>#}
{#                                <div class="col-sm-2" >{{ stock.nine }}</div>#}
{#                                <div class="col-sm-2" >{{ stock.ten }}</div>#}
{#                              </div>#}
{##}
{#                            </div>#}
{#                          </div>#}
{#                        </div>#}
{#                        </div>#}


                </div>
            </div>
        </div>
    </div>

{% endblock %}